<template>
	<navigatorComp title="" bgcColor="#121512" fontColor="#fff">
		<template #rightWrap>
			<view class="read" @click="handleSubmit">发布</view>
		</template>
	</navigatorComp>
	<view class="content">
		<up-textarea
			disableDefaultPadding
			border="none"
			height="300rpx"
			placeholderClass="plClass"
			count
			maxlength="500"
			v-model.trim="formData.substance"
			placeholder="有趣的内容会有更多赞哦..."
		></up-textarea>
		<Upload
			@sendImgList="sendImgList"
			:addColor="'#999999'"
			:backgroundColor="'#292B2A'"
			:isMargin="true"
			:upLength="9"
			:formData="{
				fileType: 'image',
				fileDirType: 'dynamic'
			}"
		/>
	</view>
</template>

<script setup>
import navigatorComp from '/components/navigator/index.vue';
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';
import Upload from '../../components/upload/upload.vue';
import _ from 'lodash';
import HomeApi from '@/API/home/index.js';
import { debounce, throttle } from 'lodash';

let navHeight = ref(0);
const homeApi = new HomeApi();
const formData = reactive({
	substance: '',
	dynamicImageUrls: ''
});
onMounted(() => {
	navHeight.value = getApp().globalData.navHeight;
});
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};
const sendImgList = (e) => {
	formData.dynamicImageUrls = JSON.stringify(e);
};
const validateSubmit = () => {
	if (formData.substance === '') {
		uni.showToast({
			title: '请输入发布内容',
			icon: 'none'
		});
		return false;
	}

	return true;
};
const handleSubmit = debounce(
	() => {
		submit();
	},
	2000,
	{ leading: true, trailing: false }
);
const submit = () => {
	if (!validateSubmit()) {
		return;
	}

	uni.showLoading();
	homeApi
		.publishDynamicApi(formData)
		.then((res) => {
			uni.showToast({
				title: '发布成功'
			});
			setTimeout(() => {
				goBack();
			}, 1000);
			uni.hideLoading();
		})
		.catch(() => {});
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background: url('http://112.124.50.179:8888/imgs/home/yan.png') no-repeat;
	background-size: 582rpx 653rpx;
	background-position: bottom right;
	background-color: #121512;
}

.read {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

::v-deep.u-textarea {
	background-color: #121512 !important;
	color: #fff;

	padding: 32rpx 0rpx 70rpx 0rpx !important;
	margin-bottom: 32rpx;
	box-sizing: border-box !important;
}

::v-deep.uni-textarea-textarea {
	color: #fff;
	font-size: 32rpx !important;
}

::v-deep.u-textarea__count {
	background: none !important;
	bottom: 16rpx !important;
	right: 16rpx !important;
	font-size: 28rpx !important;
}

.plClass {
	color: #969da3 !important;
	font-size: 32rpx;
}
</style>
